<template>
  <el-container class="home">
    <el-aside class="Sidebar" :class="isCollapse ? 'closeSidebar' : ''">
      <v-sidebar></v-sidebar>
    </el-aside>
    <el-container class="main">
      <el-main >
        <v-header ></v-header>
        <router-view :key="key" class="load-on-enter"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import vHeader from "./header";
import vSidebar from "@/view/sidebar/index";

export default {
  data() {
    return {
      isActive: false,
    };
  },
  mounted() {
    this.isActive = true
  },
  components: {
    vHeader,
    vSidebar,
  },
  computed: {
    key() {
      return this.$route.path;
    },
    isCollapse() {
      return this.$store.state.sidebar.isCollapse;
    },
  },
};
</script>

<style>
.load-on-enter {
  animation: leftenter 1s;
}
@keyframes leftenter {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  .el-aside {
    width: 220px !important;
    height: 100%;
    background-color: #304156;
  }
  .closeSidebar {
    width: 60px !important;
  }
  .el-container.main {
    height: 100%;
    width: 100%;
    padding: 0;
    background-color: #f5f5f5;
  }
}
</style>